<template>
  <div>
    <div class="header">

        <router-link :to="{name:'Home'}"> <h1 class="logo">    </h1></router-link>

      <nav>
        <ul class="nav">
          <li>
            <router-link style="color: #2384E8" :to="{name:'Movies'}">电影</router-link>
          </li>
          <li>
            <router-link style="color: #9F7860" :to="{name:'Book'}">图书</router-link>
          </li>
          <li>
            <router-link style="color: #E4A813" :to="{name:'Status'}">广播</router-link>
          </li>
          <li>
            <router-link style="color: #2AB8CC" :to="{name:'Group'}">小组</router-link>
          </li>
          <li><span @click="Search()"></span></li>
        </ul>
      </nav>
    </div>
    <div v-show="myShow" class="search">
      <div class="header-bar">
        <span class="close" @click="Search()">关闭</span>
        <!--<form class="search-input">-->
          <input type="text" @keyup.enter="ToSearch" v-model="InputValue">
        <!--</form>-->
      </div>
      <ul class="has-header">
        <li>
          <div>
            <a href="#" target="_blank">
              <strong style="color: rgb(35, 132, 232);">电影</strong>
              <span>影院热映</span>
            </a>
            <a href="#" target="_blank">
              <strong style="color: rgb(230, 70, 126);">同城</strong>
              <span>周末活动</span>
            </a>
            <a href="#" target="_blank">
              <strong style="color: rgb(159, 120, 96);">阅读</strong>
              <span>电子书</span>
            </a>
            <a href="#" target="_blank">
              <strong style="color: rgb(225, 100, 77);">东西</strong>
              <span>心爱之物</span>
            </a>
          </div>
        </li>
        <li>
          <div>
            <a href="#" target="_blank">
              <strong style="color: rgb(122, 106, 219);">电视</strong>
              <span>正在热播</span>
            </a>
            <a href="#" target="_blank">
              <strong style="color: rgb(42, 184, 204);">小组</strong>
              <span>志趣相投</span>
            </a>
            <a href="#" target="_blank">
              <strong style="color: rgb(87, 116, 197);">游戏</strong>
              <span>虚拟世界</span>
            </a>
            <a href="#" target="_blank">
              <strong style="color: rgb(64, 207, 169);">FM</strong>
              <span>红心歌单</span>
            </a>
          </div>
        </li>
        <li>
          <div>
            <a href="#" target="_blank">
              <strong style="color: rgb(159, 120, 96);">图书</strong>
              <span>畅销排行</span>
            </a>
            <a href="#" target="_blank">
              <strong style="color: rgb(244, 143, 46);">音乐</strong>
              <span>新碟榜</span>
            </a>
            <a href="#" target="_blank">
              <strong style="color: rgb(89, 108, 221);">应用</strong>
              <span>玩手机</span>
            </a>
            <a href="#" target="_blank">
              <strong style="color: rgb(66, 189, 86);">市集</strong>
              <span>购买原创</span>
            </a>
          </div>
        </li>
      </ul>
      <div class="text">
        <a href="/login">登录豆瓣</a>
        <div class="txt">
          <span style="border-right: 1px solid #f3f3f3">使用桌面版</span>
          <span>使用豆瓣App</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Header',
    components:{},
    data() {
      return {myShow:false,InputValue:''}
    },
    methods:{
      Search(){
        this.myShow = !this.myShow
      },
      ToSearch(){
        // alert(this.InputValue)
        this.$router.push({name:'SearchView',params:{val:this.InputValue}});
        this.myShow = !this.myShow
      }
    }
  }
</script>

<style lang="scss" scoped>
  .header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 998;
    max-width: 650px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 47px;
    border-bottom: 1px solid #f3f3f3;
    background: #fff;
    .logo{
      width: 46px;
      height: 22px;
      background: url("../assets/img/logo.png");
      background-size: cover;
    }
    .nav{
      li{
        display: inline-block;
        font-size: 15px;
        margin-right: 19px;
      }
    }
    span{
      display: inline-block;
      font-size: 0;
      background: url(../assets/img/search.png) no-repeat;
      background-size: cover;
      width: 24px;
      height: 18px;
      vertical-align: middle;
    }
  }
  .search {
    position: fixed;
    top: 0;
    max-width: 650px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 999;
    .header-bar{
      border-bottom: 1px solid #f3f3f3;
      padding: 15px 0px 10px 60px;;
      position: relative;
      .close{
        position: absolute;
        top: 20px;
        left: 18px;
        color: #42bd56;
        font-size: 16px;
      }
    }
    .close {
      color: #42bd56;
      font-size: 1.6rem;
    }

    .search-input {
      flex: 1;
      width: 100%;
      padding-left: 1rem;
    }

    input{
      outline: none;
      border: 0;
      background: url() no-repeat 50% #f3f3f3;
      background-size: 20px;
      border-radius: 3px;
      width: 86%;
      font-size: 14px;
      padding: 6px 10px;
    }
    ul {
      display: flex;
      justify-content: space-around;
      padding-top: 2.5rem;
      li {
        width: 33.33%;
      }

      div {
        position: relative;
        float: left;
        left: 50%;
        top: 0;
      }

      a {
        position: relative;
        left: -50%;
        top: 0;
        display: block;
        margin-bottom: 2.5rem;
        text-align: center;
      }

      strong {
        display: block;
        font-weight: 400;
        font-size: 24px;
        line-height: 28px;
      }

      span {
        display: block;
        color: #999;
        height: 17px;
        font-size: 12px;
        letter-spacing: 0.1rem;
      }
    }
    .text{
      a{
        display: inline-block;
        width: 100%;
        border-top: 1px solid #f3f3f3;
        padding: 13px 0;
        text-align: center;
        font-size: 15px;
        color: #42bd56;
      }
      .txt{
        display: flex;
        width: 100%;
        border-top: 1px solid #f3f3f3;
        border-bottom: 1px solid #f3f3f3;
        text-align: center;
        font-size: 15px;
        color: #42bd56;
        padding: 13px 0;
        span{
          flex: 1;
        }
      }
    }
  }
</style>
